ここまでの解説でも2段組は実現できますが、あまり見やすいホームページになりません。そこで、以下のようにスタイルシートを追加し、見やすいホームページに改良した例を紹介しておきます。各タグのスタイルシートの内容は以下のとおりです。
・H1、H3タグ
左側に5％の余白を設けます。
・HRタグ
左右に5％の余白を設けるため、横幅を90％に指定します。
・DIVタグ（left）
横幅43％で左の回り込みを指定し、左側に5％の余白を設けます。この結果、このDIVタグの横幅は48％になります。また、フォントを等幅フォント、行間を1.5行に指定し、文章を読みやすくしています。
・DIVタグ（right）
横幅43％で右の回り込みを指定し、右側に5％の余白を設けます。この結果、このDIVタグの横幅も48％になります。左右のDIVタグの横幅はそれぞれ48％となるため、100−（48×2）＝4％が左右の段の間隔になります。また、こちらもフォントを等幅フォント、行間を1.5行に指定し、文章を読みやすくしておきます。
|
